<template>
  <div class="view-wrap">
    <swiper :swiper-list="this.datas.pics"></swiper>
    <name :title="this.datas.name"></name>
    <stars :star-info="{'score':this.datas.score,'star':this.datas.star}"></stars>
    <address-detail :title="this.datas.address"></address-detail>
    <price :title="this.datas.default_price"></price>
    <open-date-time :title="this.datas.open_datetime"></open-date-time>
    <tip :title="this.datas.tip"></tip>
    <intro :title="this.datas.intro"></intro>
    <ticket :title="this.datas.ticket_info"></ticket>
  </div>
</template>

<script>
  import Swiper from 'components/ScrollWrapper/Sub/Swiper.vue';
  import Name from 'components/ScrollWrapper/Detail/Sub/Name.vue';
  import Stars from 'components/ScrollWrapper/Detail/Sub/Stars.vue';
  import AddressDetail from 'components/ScrollWrapper/Detail/Sub/Address.vue';
  import Price from 'components/ScrollWrapper/Detail/Sub/Price.vue';
  import OpenDateTime from 'components/ScrollWrapper/Detail/Sub/OpenDateTime.vue';
  import Tip from 'components/ScrollWrapper/Detail/Sub/Tip.vue';
  import Intro from 'components/ScrollWrapper/Detail/Sub/Intro.vue';
  import Ticket from 'components/ScrollWrapper/Detail/Sub/Ticket.vue';

  export default {
    name: 'ViewDetail',
    props: ['datas'],
    components: {
      Swiper,
      Name,
      Stars,
      AddressDetail,
      Price,
      OpenDateTime,
      Tip,
      Intro,
      Ticket
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .view-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background-color: #FFFFFF;
  }
</style>
